<template>
    <div class="app-container">
        <div class="mb10">
            <div class="map-all basis-text  app-left-width float-left  bg-white app-height">
                <!---<div class="from-info details-nav-tit">
                    <span>表名称：</span>
                    <span class="details-nav-tit-text" v-show="!isBasciEdit">{{getDataBeseBasic.tableAlias|| '-'}}</span>
                    <el-input v-show="isBasciEdit" placeholder="请输入内容" class="details-nav-tit-setInput" v-model="getDataBeseBasic.tableAlias"></el-input>
                 </div>-->
                <div class="from-info  from-info-basis">
                    <el-popover
                        placement="right"
                        width="400"
                        popper-class="tip-from"
                        trigger="click">
                        <div slot="reference">
                            <p class="title">基础信息</p>
                            <div class="from-info-item">
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表名称：</span>
                                    <span class="item-child-value"
                                          v-show="!isBasciEdit">{{ getDataBeseBasic.tableAlias || '-' }}</span>
                                    <input v-show="isBasciEdit" placeholder="请输入内容" class="item-child-input"
                                           v-model="getDataBeseBasic.tableAlias"/>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表单名称(英):</span>
                                    <span class="item-child-value copy-content"
                                          id="databaseName2">{{ getDataBeseBasic.tableName || "-" }}</span>
                                    <!-- el-icon-document-copy -->
                                    <i class="el-icon-document-copy copy-icon" ref="copyContent2"
                                       @click="copy('clipboard2','copyContent2','databaseName2')"></i>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">所属分类:</span>
                                    <span class="item-child-value"
                                    >{{ getDataBeseBasic.dirPath || "-" }}</span
                                    >
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表单描述：</span>
                                    <span class="item-child-value" v-show="!isBasciEdit"
                                    >{{ getDataBeseBasic.comment || "-" }}</span
                                    >
                                    <input class="item-child-input" v-model="getDataBeseBasic.comment"
                                           v-show="isBasciEdit" type="text">
                                </div>
                            </div>
                        </div>
                        <!---el-popover 显示的内容--->
                        <div>
                            <p class="title reference-tit">基础信息</p>
                            <div class="from-info-item">
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表名称：</span>
                                    <span class="item-child-value">{{ getDataBeseBasic.tableAlias || '-' }}</span>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表单名称(英):</span>
                                    <span class="item-child-value"
                                          id="databaseName">{{ getDataBeseBasic.tableName || "-" }}</span>
                                    <i class="el-icon-document-copy copy-icon" ref="copyContent"
                                       @click="copy('clipboard','copyContent','databaseName')"></i>
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">所属分类:</span>
                                    <span class="item-child-value"
                                    >{{ getDataBeseBasic.dirPath || "-" }}</span
                                    >
                                </div>
                                <div class="from-info-item-child">
                                    <span class="item-child-tit">表单描述：</span>
                                    <span class="item-child-value"
                                    >{{ getDataBeseBasic.comment || "-" }}</span
                                    >
                                </div>
                            </div>
                        </div>
                    </el-popover>
                </div>
                <!---统计信息-->
                <div class="from-info from-info-statis">
                    <p class="title">统计信息</p>
                    <div class="from-info-item">
                        <div class="from-info-item-child">
                            <span class="item-child-tit">数据最近更新:</span>
                            <span
                                cclass="item-child-value">{{ getDataBeseBasic.updateTime ? parseTime(new Date(getDataBeseBasic.updateTime)) : '-' }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">表单创建时间:</span>
                            <span
                                class="item-child-value">{{ getDataBeseBasic.createTime ? parseTime(new Date(getDataBeseBasic.createTime)) : '-' }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">数据行数: </span>
                            <span class="item-child-value">{{ getDataBeseBasic.totalRows + "行" || '-' }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">字段数量:</span>
                            <span class="item-child-value">{{ getDataBeseBasic.totalFields || '-' }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">文件大小:</span>
                            <span
                                class="item-child-value">{{ getDataBeseBasic.storeSize ? (getDataBeseBasic.storeSize / 1024 / 1024).toFixed(2) + 'Mb' : '-' }}</span>
                        </div>
                    </div>
                </div>
                <!---权限信息-->
                <div class="from-info from-info-permi">
                    <p class="title">权限信息</p>
                    <div class="from-info-item">
                        <div class="from-info-item-child">
                            <span class="item-child-tit">安全等级:</span>
                            <span class="item-child-value" v-show="!isBasciEdit">{{ getDataBeseBasic.safeLevel }}</span>
                            <el-select v-model="getDataBeseBasic.safeLevel" placeholder="请选择安全等级" v-show="isBasciEdit">
                                <el-option v-for="(item,index) in safeLevelList" :key="index" :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">我的权限:</span>
                            <span
                                class="item-child-value">{{ checkaccessType(getDataBeseBasic.accessType) || "-" }}</span>
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">负责组:</span>
                            <el-tooltip class="item" effect="dark" :content="getDataBeseBasic.deptName"
                                        placement="top-start">
                                <span class="item-child-value">{{ getDataBeseBasic.deptName || "-" }}</span>
                            </el-tooltip>
                            <!--<span class="item-child-value">{{getDataBeseBasic.deptName || "-"}}</span>
                            <input class="item-child-input" v-show="isBasciEdit" type="text" v-model="getDataBeseBasic.deptName"/>-->
                        </div>
                        <div class="from-info-item-child">
                            <span class="item-child-tit">负责人:</span>
                            <el-tooltip class="item" effect="dark" :content="getDataBeseBasic.managerName"
                                        placement="top-start">
                                <span class="item-child-value">{{ getDataBeseBasic.managerName || "-" }}</span>
                            </el-tooltip>
                            <!--<span class="item-child-value">{{getDataBeseBasic.managerName || "-"}}</span>
                            <el-select v-model="getDataBeseBasic.managerName" placeholder="请选择负责人"  v-show="isBasciEdit" >
                               <el-option  v-for="(item,index) in userList" :key="index" :label="item.realName" :value="item.realName"></el-option>
                            </el-select>-->
                        </div>
                    </div>
                </div>
                <div class=" from-info basis-text-btn-list">
                    <el-button
                        type="primary" plain
                        size="mini"
                        v-show="!isBasciEdit&&(getDataBeseBasic.accessType=='3' || getDataBeseBasic.accessType=='4' || getDataBeseBasic.accessType=='5')"
                        @click="basciEditHanld">编辑
                    </el-button>
                    <el-button
                        type="primary" plain
                        size="mini"
                        v-show="isBasciEdit"
                        @click="basciSaveHanld">保存
                    </el-button>
                    <el-button
                        size="mini"
                        type="warning" plain
                        v-show="isBasciEdit"
                        @click="basciExitHanld">取消
                    </el-button>
                </div>
            </div>
            <el-row :gutter="20" type="flex" style="margin-right:340px;" class="app-height">
                <el-col :span="24" class="map-container bg-white">
                    <div class="menu search-item">
                        <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                        >
                            <el-menu-item index="baseInfo">基础信息</el-menu-item>
                            <el-menu-item index="dataView">数据预览</el-menu-item>
                            <el-menu-item index="metaData">元数据信息</el-menu-item>
                            <el-menu-item index="blood">血缘关系</el-menu-item>
                            <el-menu-item index="updateRecord" v-show="getDataBeseBasic.accessType == 5">更新记录
                            </el-menu-item>
                            <el-menu-item index="monitor" v-show="getDataBeseBasic.accessType == 5">使用监控</el-menu-item>
                        </el-menu>
                        <div class="operation-btn-item">
                            <el-row :span="5" :gutter="10">
                                <el-col :span="1.5">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-refresh-right"
                                        size="mini"
                                        @click="handleUpdate()"
                                    >重置
                                    </el-button
                                    >
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-tickets"
                                        size="mini"
                                        @click="handleApplyPermis"
                                    >申请权限
                                    </el-button
                                    >
                                </el-col>
                                <el-col :span="1.5">
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleQuit"
                                    >
                                        <!--<svg class="icon" aria-hidden="true">
                                           <use xlink:href="#icon-tuichus"/>
                                        </svg>
                                        <i class="exit-btn btn-size"></i>-->
                                        <i class="iconfont icon-tuichu"></i>
                                        返回
                                    </el-button
                                    >
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div>
                        <dataView v-if="activeIndex == 'dataView'" ref="dataView"
                                  :accessType="getDataBeseBasic.accessType"/>
                        <metaData :isEdit="isEdit" v-else-if="activeIndex == 'metaData'" ref="metaData"
                                  :accessType="getDataBeseBasic.accessType"/>
                        <blood :isEdit="isEdit" v-else-if="activeIndex == 'blood'" ref="blood"/>
                        <updateRecord :isEdit="isEdit" v-else-if="activeIndex == 'updateRecord'" ref="updateRecord"/>
                        <monitor v-else-if="activeIndex == 'monitor'" ref="monitor"/>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import {getDateViewList, addAndEditDateViewList, getFieldsList, dateViewExport} from "@/api/dataManagement/system/info";
import {deepEqual, filterParams, getHeight} from "@/utils/zkComm";

export default {
    name: "mapDetails",
    props: ['accessType'],
    data() {
        return {
            // 遮罩层
            loading: false,
            morehandleValue: '',
            previewList: [],
            isRowEdit: false,
            isAddRow: false,
            mapHeight: undefined,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 30,
                tableId: '',
            },
            options: [{
                value: 'newCreate',
                label: '导出整表',
                icon: "el-icon-plus"
            }, {
                value: 'copyValue',
                label: '导出筛选结果',
                icon: "el-icon-document-copy"
            }],
            fieldName: '',
            condition: '',
            leftVal: '',
            rightVal: '',
            fieldList: [],
            conditionList: [],
            isshowRight: false,
            checkType: 'number',
        }
    },
    created() {
        this.queryParams.tableId = this.$route.params.tableId
        this.getDataViewList()
        this.getFieldsbasicList()
    },
    mounted() {
        //   this.mapHeight = getHeight(true)+30
    },
    methods: {
        // 获取数据方法
        // 数据预览列表
        getDataViewList() {
            this.loading = true;
            getDateViewList(this.queryParams).then(res => {
                if (res.code == 200) {
                    res.data.list.forEach(element => {
                        element.isEdit = false
                    });
                    this.previewList = res.data;
                    this.total = res.data.total;
                    this.loading = false;
                    this.mapHeight = (getHeight(true) + 30)
                }
            })
        },
        handleSelectField(item) {
            this.isshowRight = false;
            var numList = ['tinyint', 'smallint', 'int', 'integer', 'bigint', 'float', 'double', 'decimal'],
                dateList = ['date', 'datetime', 'timestamp'],
                strList = ['char', 'varchar', 'tinytext', 'tinyblob', 'blob', 'text', 'mediumblob', 'mediumtext', 'longblob', 'longtext']
            var str = [
                {key: '<', val: 'lt'}, {key: '=', val: 'eq'},
                {key: '<=', val: 'le'}, {key: '>', val: 'gt'},
                {key: '>=', val: 'ge'}, {key: '≠', val: 'ne'},
                {key: '(a,b)', val: '(a,b)'}, {key: '(a,b]', val: '(a,b]'},
                {key: '[a,b)', val: '[a,b)'}, {key: '[a,b]', val: '[a,b]'},
                {key: '空值', val: 'null'}, {key: '非空', val: 'notNull'},
            ]
            if (numList.indexOf(item['dataType']) != -1) {
                this.conditionList = str
                this.checkType = 'number'
            } else if (strList.indexOf(item['dataType']) != -1) {
                var dataText = str = [
                    {key: '包含', val: 'contain'}, {key: '不包含', val: 'notContain'},
                    {key: '开头为', val: 'startWith'}, {key: '结尾为', val: 'endWith'},
                    {key: '精准匹配', val: 'eq'},
                    {key: '空值', val: 'null'}, {key: '非空', val: 'notNull'},
                ]
                this.conditionList = dataText
                this.checkType = 'string'
            } else if (dateList.indexOf(item['dataType']) != -1) {
                this.conditionList = str;
                this.checkType = 'dateTime'
            }
            this.condition = '';
            this.leftVal = '';
            this.condition = '';
            this.rightVal = '';
        },
        handleSelectCondition(item) {
            console.log(item)
            if (['(a,b)', '[a,b)', '(a,b]', '[a,b]'].indexOf(item.key) > -1) {
                this.isshowRight = true;
            } else {
                this.isshowRight = false;
            }
        },
        handleQuery() {
            var that = this;
            that.queryParams.fieldName = undefined
            that.queryParams.condition = undefined
            that.queryParams.leftVal = undefined
            that.queryParams.condition = undefined
            if (that.fieldName) {
                that.queryParams.fieldName = that.fieldName
            }
            if (that.condition) {
                that.queryParams.condition = that.condition
            }
            console.log(this.checkType)
            if (that.leftVal && this.checkType != 'dateTime') {
                that.queryParams.leftVal = that.leftVal.replace(/\s/g, "");
            }
            if (that.rightVal && this.checkType != 'dateTime') {
                that.queryParams.rightVal = that.rightVal.replace(/\s/g, "");
            }
            console.log(that.fieldName, that.condition, that.leftVal)
            if (that.fieldName && that.condition && that.leftVal || that.fieldName && that.condition && that.leftVal && that.rightVal) {
                that.queryParams.fieldName = that.fieldName
                that.queryParams.condition = that.condition
                if (this.checkType != 'dateTime') {
                    that.queryParams.leftVal = that.leftVal.replace(/\s/g, "");
                }
                if (that.leftVal && this.checkType == 'dateTime') {
                    that.queryParams.leftVal = this.parseTime(new Date(that.leftVal), '{y}-{m}-{d} {h}:{i}:{s}')
                }
                if (that.rightVal && this.checkType != 'dateTime') {
                    that.queryParams.rightVal = that.rightVal.replace(/\s/g, "");
                }
                if (that.rightVal && this.checkType == 'dateTime') {
                    that.queryParams.rightVal = this.parseTime(new Date(that.rightVal), '{y}-{m}-{d} {h}:{i}:{s}')
                }
                // this.getFieldsbasicList()
                this.getDataViewList()
            } else {
                this.getDataViewList()
                // this.getFieldsbasicList()
            }
        },
        getFieldsbasicList() {
            getFieldsList({params: this.queryParams}).then(res => {
                if (res.code == 200) {
                    this.fieldList = res.data
                }
            })
        },
        exportBtn() {
            var that = this;
            var {pageNum, pageSize} = that.queryParams
            var query = {
                pageNum,
                pageSize,
            }
            dateViewExport({tableId: that.queryParams.tableId, query: that.queryParams}).then(res => {
                this.download(res.msg);
            })
        },
        watchContentHandle(e) {
            if (this.checkType == 'number') {
                this.leftVal = this.leftVal.replace(/^\.+|[^\d.]/g, '')
                this.rightVal = this.rightVal.replace(/^\.+|[^\d.]/g, '')
                console.log(this.leftVal)
            } else {
                this.leftVal = this.leftVal;
                this.rightVal = this.rightVal;
            }
        },
        handleRowClick() {
        },
        // 删除
        handleDelete(index, row) {
            this.isRowEdit = false
            this.isAddRow = false
            if (this.isRowEdit || this.isAddRow) {
                this.$message({
                    message: '请先保存或取消正在编辑的数据后再进行删除',
                    type: 'warning'
                })
                return false
            }
            let paramsRow = filterParams(row, ['isEdit'])
            addAndEditDateViewList({method: 'delete', tableId: this.queryParams.tableId, data: paramsRow}).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.getDataViewList()
                }
            }).catch(() => {
                this.getDataViewList()
            })
        },
        handleAddRow() {
            if (this.isRowEdit || this.isAddRow) {
                this.$message({
                    message: '先保存再进行新增数据',
                    type: 'warning'
                })
                return false
            }
            var addRow = {}
            for (var i = 0; i < this.previewList.header.length; i++) {
                addRow[this.previewList.header[i].property] = null
            }
            addRow.isAddRow = true
            this.isAddRow = true
            this.previewList.list.push(addRow)
        },
        getpreviewList(index) {
            var previewList = this.previewList.list
            previewList[index].isEdit = !previewList[index].isEdit
            if (previewList[index].isAddRow) previewList[index].isAddRow = false
        },
        deepEqual(object1, object2) {
            const keys1 = Object.keys(object1);
            const keys2 = Object.keys(object2);

            function isObject(obj) {
                return Object.prototype.toString.call(obj) === '[object Object]'
            }

            if (keys1.length !== keys2.length) {
                return false;
            }
            for (const key of keys1) {
                const val1 = object1[key];
                const val2 = object2[key];
                const areObjects = isObject(val1) && isObject(val2);
                if (
                    areObjects && !deepEqual(val1, val2) || !areObjects && val1 !== val2
                ) {
                    return false;
                }
            }
            return true;
        },
        // 编辑
        handleEdit(index, row) {
            if (this.isRowEdit || this.isAddRow) {
                this.$message({
                    message: '请先保存正在编辑的数据后再进行编辑',
                    type: 'warning'
                })
                return false
            }
            this.getpreviewList(index);
            this.isRowEdit = true
        },
        // 保存
        handleSave(index, row) {
            this.getpreviewList(index);
            this.isRowEdit = false
            this.isAddRow = false
            var params = {
                method: 'put',
                text: '编辑'
            }
            // this.queryParams.tableId
            delete row.undefined;
            if (row.isAddRow == false) {
                params.method = 'post'
                params.text = '新增'
                delete row.isAddRow;
            } else {
                params.method = 'put'
                params.text = '编辑'
            }
            let paramsRow = filterParams(row, ['isEdit'])
            addAndEditDateViewList({
                tableId: this.queryParams.tableId,
                data: paramsRow,
                method: params.method
            }).then((res, err) => {
                if (res.code == 200) {
                    this.$message({
                        message: params.text + '成功',
                        type: 'success'
                    })
                    this.getDataViewList()
                }
            }).catch(() => {
                this.getDataViewList()
            })
            // if(row.isAddRow == false) {
            // 	delete row.isAddRow;
            // 	addAndEditDateViewList({method:'post',tableId:this.queryParams.tableId,data:row}).then(res=>{
            // 		if(res.code == 200){
            // 			this.getDataViewList()
            // 		}
            // 	})
            // } else {
            // 	addAndEditDateViewList({method:'put',tableId:this.queryParams.tableId,data:row}).then(res=>{
            // 		if(res.code == 200){
            // 			this.getDataViewList()
            // 		}
            // 	})
            // }

        },
        handleExit(index, row) {
            if (row.isAddRow) {
                var data = this.previewList.list
                data.splice(index, 1)
                this.previewList.list = data
                this.isRowEdit = false
                this.isAddRow = false
            } else {
                this.getpreviewList(index);
                this.isRowEdit = false
            }
            this.getDataViewList();
        },
        handleSelectionChange() {
        },
        filterParams(obj, arr) {
            let result = {}
            for (var item in obj) {
                if (arr.indexOf(item) == -1) {
                    result[item] = obj[item]
                }
            }
            return result;
        },
        updataHandle() {
            this.fieldName = ''
            this.condition = ''
            this.leftVal = ''
            this.rightVal = ''
            this.queryParams.fieldName = undefined;
            this.queryParams.condition = undefined;
            this.queryParams.leftVal = undefined
            this.getDataViewList()
        },
        showPopover(scope) {
            // console.log(this.$refs['showPopover'+index])
            // return {'overflow': 'hidden','text-overflow': 'ellipsis','display': '-webkit-box','-webkit-line-clamp': '2', '-webkit-box-orient': 'vertical'}
        }
    },
}
// //鼠标划入滚动条展现，鼠标划出滚动条隐藏
// function scrollbarShowHidden(element){
//     element.addClass('scrollbarHide');
//     element.hover(function() {
//         element.addClass('scrollbarShow');
//     }, function() {
//         element.removeClass('scrollbarShow');
//     });

// }

// scrollbarShowHidden($('.el-table__body-wrapper'));
</script>
<style>
.data-view-table .el-date-editor.el-input {
    width: 159px !important;
}
</style>
<style lang="scss" scoped>
/****
 reset element style
.

 */
.data-view-table {
    position: relative;

    .not-accessType {
        font-size: 16px;
        padding: 20px;
        color: #606266;
        background: #ffe399;
        border: 1px solid #ddd;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -109px;
        margin-top: -31px
    }
}

.el-col-3 {
    width: 70px;
}

.el-col-2 {
    width: 96px;
    margin-right: 10px;
}

/****
reset element style
.

*/
.operation {
    line-height: 43px;
    padding: 10px 0;

    .search-select-child, .search-select-descen, .search-select-parent {
        margin-right: 10px;
    }

    .search-select-parent {
        width: 200px;
    }

    .search-select-child, .search-select-descen {
        width: 180px;
    }

    .el-button--mini {
        margin-right: 10px;
    }
}

.search-input-list {
    overflow: hidden;
    display: inline-block;
}

.search-btn {
    display: inline-block;

    .search-btn-item {
        display: inline-block;
    }
}
</style>
